<template>
    <div class="MusicList" v-cloak>
        <div class="description">
            <img :src="playlist.coverImgUrl">
            <div class="text">
                <h1>{{playlist.name}}</h1>
                <div class="creator">
                    <img :src="avatarUrl">
                    <router-link :to="{name:'MyInfo'}">{{nickname}}</router-link>
                    <a>{{formatDate(createTime)}}</a>
                </div>
                <div class="btn">
                    <span>
                        <button class="fa fa-play">播放全部</button>
                        <button class="fa fa-plus"></button>
                    </span>
                    <span class="fa fa-star-o" id="star">
                        收藏 ( {{Dynamic.bookedCount}} )
                    </span>
                    <span class="fa fa-external-link">
                        分享 ( {{Dynamic.shareCount}} )
                    </span>
                    <span class="fa fa-download">
                        下载全部歌曲
                    </span>
                </div>
                <div class="title">
                    <p v-if="tags">标签 ：
                        <router-link :to="{name:'NewMusic'}" v-for="tags in tags" :key="tags">
                            {{tags}}
                        </router-link>
                    </p>
                    <p><i>歌曲 ：{{playlist.trackCount}}</i><i>播放 ：{{playCount}}</i></p>
                    <p v-if="playlist.description">简介 ：{{playlist.description}}</p>
                </div>
            </div>
        </div>
        <div class="go">
            <ul>
                <li :class="{active:show===0?true:false}" @click="go(0)">歌曲列表</li>
                <li :class="{active:show===1?true:false}" @click="go(1)">评论 ( {{Dynamic.commentCount}} )</li>
                <li :class="{active:show===2?true:false}" @click="go(2)">收藏者</li>
            </ul>
        </div>
        <List v-if="show===0?true:false" :Id="this.$route.params.id"></List>
        <Comment v-else-if="show===1?true:false"></Comment>
        <Collector v-else-if="show===2?true:false"></Collector>
    </div>
</template>

<script>
import {
    detail,
    dynamic
} from '@/library/api/api'
import List from '@/components/com/List/List/List.vue'
import Comment from '@/components/com/List/Comment/Comment.vue'
import Collector from '@/components/com/List/Collector/Collector.vue'
export default {
    name:'MusicList',
    components: {
        List,
        Comment,
        Collector,
    },
    data() {
        return {
            playlist:{},
            createTime:"创建时间",
            avatarUrl:"",
            nickname:"",
            tags:{},
            playCount:{},
            show:0,
            Dynamic:{}
        }
    },
    methods:{
        go(data) {
            if(data=="0") {
                this.show = 0
            } else if(data=="1") {
                this.show = 1
            } else if(data=="2") {
                this.show = 2
            }
        },
        function() {
            detail({
                data: {
                    id:this.$route.params.id,
                }
            }).then(res=>{
                // console.log(res);
                this.playlist = res.playlist
                this.createTime = res.playlist.createTime
                this.avatarUrl = res.playlist.creator.avatarUrl
                this.nickname = res.playlist.creator.nickname
                this.tags = res.playlist.tags
                if(res.playlist.playCount>100000000) {
                    res.playlist.playCount = parseInt((res.playlist.playCount/100000000))+ " 亿"
                    this.playCount = res.playlist.playCount
                }else if(res.playlist.playCount>1000) {
                    res.playlist.playCount = parseInt((res.playlist.playCount/10000))+ " 万"
                    this.playCount = res.playlist.playCount
                }
            })
        },
        detailDynamic() {
            dynamic({
                data: {
                    id:this.$route.params.id,
                }
            }).then(res=>{
                this.Dynamic = res
                if(this.Dynamic.bookedCount>100000000) {
                    this.Dynamic.bookedCount = parseInt((this.Dynamic.bookedCount/100000000))+ " 亿"
                }else if(this.Dynamic.bookedCount>1000) {
                    this.Dynamic.bookedCount = parseInt((this.Dynamic.bookedCount/10000))+ " 万"
                }
            })
        }
    },
    beforeRouteUpdate(to, from, next) {
        next()
        this.function()
        this.detailDynamic()
    },
    created() {
        this.function()
        this.detailDynamic()
    },
}
</script>

<style lang="scss" scoped>
@import './MusicList.scss'
</style>
